<template>
    <div class="page-main" v-title data-title="工程技术列表">
        <home-nav :userData="userinfo"></home-nav>
        <div class="banner"><span>工程技术列表</span></div>
        <div class="container">
            <div class="header">
                <a-form layout="inline" @keyup.enter.native="searchQuery">
                    <a-row type="flex" justify="space-between" align="middle">
                        <a-col :xl="{ span: 18 }" :lg="{ span: 18 }">
                            <a-button type="primary" @click="doAdd" style="margin-left: 8px">新增</a-button>
                            <a-button @click="doEdit" style="margin-left: 8px">修改</a-button>
                            <a-button @click="handlePostExportXls('技术库文件关键词表')" style="margin-left: 10px">导出</a-button>
                            <a-button @click="doDel" style="margin-left: 8px">删除</a-button>
                            <a-button @click="searchReset()" style="margin-left: 8px">刷新</a-button>
                            <a-space align="center" style="margin-bottom: 16px;margin-left: 16px">
                                <a-switch @click="treeFold" v-model="expandTree" checked-children="展开"
                                    un-checked-children="关闭" />
                            </a-space>
                        </a-col>
                        <a-col :xl="{ span: 6 }" :lg="{ span: 6 }" class="input-ground">
                            <a-input-search v-model="queryParam.keyWord" @search="searchQuery"
                                placeholder="请按照关键词进行搜索" />
                            <a-button @click="showSearchForm = true" style="margin-left: 8px">高级查询</a-button>
                        </a-col>
                    </a-row>
                </a-form>

                <a-modal :visible="showSearchForm" width="70vw" :bodyStyle="{ padding: '10px' }" title="高级查询"
                    @ok="handleToSearch" @cancel="showSearchForm = false">
                    <a-form-model ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-row :gutter="24">
                            <a-col :span="8">
                                <a-form-model-item label="关键词">
                                    <a-input v-model="queryParam.keyWord" placeholder="请按照关键词进行搜索" />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item label="是否启用">
                                    <a-select style="width: 100%" v-model="queryParam.enable">
                                        <a-select-option value=""> 全部</a-select-option>
                                        <a-select-option v-for="d in codeMaps['技术库关键字启用状态']" :value="d.code"
                                            :key="d.code">{{ d.name }}
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item label="描述">
                                    <a-input v-model="queryParam.description" />
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                    </a-form-model>
                </a-modal>
            </div>
            <div class="content-list">
                <a-table ref="table" bordered size="middle" :rowKey="rowKey" :columns="columns" :dataSource="dataSource"
                    :expandedRowKeys="expandedRowKeys" @expand="onExpand" :expandRowByClick="true" :pagination="false"
                    :rowSelection="{
                        selectedRowKeys: selectedRowKeys,
                        onChange: onSelectChange,
                        onSelectAll: onSelectAll,
                        columnWidth: 1,
                    }" :loading="loading" :scroll="{ x: true }">
                    <template slot="enableShow" slot-scope="text, record">
                        <a-switch :checkedValue="1" :unCheckedValue="0" v-model="record.enable"
                            @change="changeEnable(record)" checked-children="已启用" un-checked-children="未启用" />
                    </template>
                    <template slot="typeShow" slot-scope="text, record">
                        <span v-for="(code, index) in codeMaps['技术库关键字级别']" :key="index">
                            <i v-if="record.type == code.code">{{ code.name }}</i>
                        </span>
                    </template>
                </a-table>
            </div>
        </div>
        <addKeyWord ref="addKeyWord" @success="searchReset" />
    </div>

</template>
  <script>
import Vue from 'vue'
import { getAction, postAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListSearchMixin'
import { ACCESS_TOKEN, USER_NAME } from '@/store/mutation-types'
export default {
    name: 'TechList',
    mixins: [JeecgListMixin],
    components: {
        HomeNav: () => import('@/components/layouts/HomeNav'),
        addKeyWord: () => import('@/views/tech/keywords/addKeyWord'),
    },
    data() {
        return {
            userinfo: {
                info: this.$store.getters.userInfo,
                module: 'ContractReportInfo',
            },
            expandTree: false,
            expandedRowKeys: [],
            columns: [
                {
                    title: '关键字',
                    align: 'left',
                    width: "250px",
                    dataIndex: 'keyWord',
                },
                {
                    title: '级别',
                    align: 'center',
                    width: "320px",
                    dataIndex: 'typeShow',
                    scopedSlots: { customRender: 'typeShow' },
                },
                {
                    title: '描述',
                    align: 'center',
                    width: "220px",
                    dataIndex: 'description',
                    customCell: () => {
                        return {
                            style: {
                                width: '220px',
                                overflow: 'hidden',
                                whiteSpace: 'nowrap',
                                textOverflow: 'ellipsis',
                                cursor: 'pointer',
                            },
                        }
                    },
                    customRender: (text, record) => (
                        <a-tooltip placement="topLeft" title={record.description}>
                            {record.description}
                        </a-tooltip>
                    ),
                },
                {
                    title: '状态',
                    align: 'center',
                    width: "100px",
                    dataIndex: 'enableShow',
                    scopedSlots: { customRender: 'enableShow' },
                },
                {
                    title: '创建人',
                    align: 'center',
                    width: "90px",
                    dataIndex: 'creater',
                },
                {
                    title: '创建时间',
                    align: 'center',
                    width: "100px",
                    dataIndex: 'createTime',
                }, {
                    title: '修改人',
                    align: 'center',
                    width: "90px",
                    dataIndex: 'updater',
                },
                {
                    title: '修改时间',
                    align: 'center',
                    width: "100px",
                    dataIndex: 'updateTime',
                },
            ],
            url: {
                save: '/techKeyWords/add',
                list: '/techKeyWords/treeList',
                exportXlsUrl: '/techKeyWords/exportXls',
                delete: '/techKeyWords/delete',
                codes: '/manage/codeInfo/queryByTypes',
            },
            showSearchForm: false,
            keyword: '',
            labelCol: { span: 8 },
            wrapperCol: { span: 15 },
            category: 1,
            codeMaps: {}
        }
    },
    created() {
        if (this.$route.params && this.$route.params.category) {
            this.category = this.$route.params.category
        } else {
            this.category = 1
        }
        this.queryParam.category = this.category
        this.fetchCodes()
    },
    methods: {
        fetchCodes() {
            this.defaultInfos = []
            getAction(this.url.codes, {
                types:
                    '技术库关键字类型,技术库关键字启用状态,技术库关键字级别'
            }).then((res) => {
                if (res.success) {
                    this.codeMaps = res.result
                }
            })
        },
        handleToSearch() {
            this.showSearchForm = false
            this.queryParam.category = this.category
            this.searchQuery()
        },
        doAdd() {
            let pid = ""
            if (this.selectedRowKeys.length > 0) {
                pid = this.selectedRowKeys[0]
            }
            // init(type,form,treeData,title)
            this.$refs.addKeyWord.init("add", this.category, { id: pid }, this.dataSource, "新增关键词")
        },
        doEdit() {
            if (this.selectionRows.length != 1) {
                return this.$message.warning("请选择一条记录进行操作")
            }
            this.$refs.addKeyWord.init("edit", this.category, this.selectionRows[0], this.dataSource, "编辑关键词")
        },
        async doDel() {
            if (this.selectedRowKeys.length <= 0) {
                return this.$message.warning("请至少一条记录进行操作")
            }
            let res = await getAction(this.url.delete + '?id=' + this.selectedRowKeys.join(","))
            if (res.success) {
                this.$message.success("删除成功")
                this.searchReset()
            } else {
                this.$message.error("删除失败" + res.message)
            }
        },
        searchReset() {
            this.queryParam = {}
            this.queryParam.category = this.category
            this.handleToSearch()
        },
        treeFold() {
            if (!this.expandTree) {
                this.expandedRowKeys = []
            } else {
                this.expandedRowKeys = this.getRowKeys(this.dataSource)
            }
            console.info(this.expandedRowKeys)
        },
        getRowKeys(rows) {
            let expandedRowKeys = []
            rows.forEach(element => {
                expandedRowKeys.push(element.id)
                if (element.children) {
                    expandedRowKeys = [...expandedRowKeys, ...this.getRowKeys(element.children)]
                }
            });
            return expandedRowKeys;
        },
        onExpand(expanded, record) {
            if (expanded) {
                // 设置展开窗Key
                this.expandedRowKeys.push(record.id)
            } else {
                if (this.expandedRowKeys.length) {
                    this.expandedRowKeys = this.expandedRowKeys.filter(v => {
                        return v != record.id;
                    });
                }
            }
        },
        async changeEnable(record) {
            let res = await postAction(this.url.save, record)
            if (res.success) {
                this.$message.success("修改成功")
            } else {
                this.$message.error("修改失败" + res.message)
            }
        }
    }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/hte-main.less';
@import '~@assets/less/hte-main.less';

.page-main {
    .banner {
        background-image: url(../../../assets/tech/techHead.png);
    }

    .container {
        .content-list {
            margin-top: 15px;
        }
    }
}
</style> 